<template>
  <div class="app-container">


    <!-- 新增修改表单333 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="formSubmitData" label-position="left" label-width="70px"
               style="width: 400px; margin-left:50px;">
        <el-form-item label="Type" prop="type">
          <el-select v-model="formSubmitData.type" class="filter-item" placeholder="Please select">
            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name"
                       :value="item.key"/>
          </el-select>
        </el-form-item>
        <el-form-item label="Date" prop="timestamp">
          <el-date-picker v-model="formSubmitData.timestamp" type="datetime" placeholder="Please pick a date"/>
        </el-form-item>
        <el-form-item label="Title" prop="title">
          <el-input v-model="formSubmitData.title"/>
        </el-form-item>
        <el-form-item label="Status">
          <el-select v-model="formSubmitData.status" class="filter-item" placeholder="Please select">
            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="Imp">
          <el-rate v-model="formSubmitData.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3"
                   style="margin-top:8px;"/>
        </el-form-item>
        <el-form-item label="Remark">
          <el-input v-model="formSubmitData.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea"
                    placeholder="Please input"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          Cancel
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          Confirm
        </el-button>
      </div>
    </el-dialog>


    <!-- vxe 检索表单 -->
    <vxe-form
      :data="formSearchData"
      title-width="120"
      title-align="right"
      @submit="searchEvent"
      @reset="searchEvent"
    >
      <!--
        vxe-form-item  属性和事件
        title-prefix
        item-render 项渲染器配置项
       -->
      <vxe-form-item
        field="title"
        title="标题"
        span="8"
        :title-prefix="{ message: '模糊匹配', icon: 'fa fa-exclamation-circle' }"
        :item-render="{name: 'ElInput',props: {size: 'small'}}"
      >
      </vxe-form-item>

      <vxe-form-item
        field="xsown"
        title="水电费"
        span="8"
      >
        <vxe-pulldown ref="xDown4" transfer>
          <template v-slot>
            <vxe-input v-model="value4" suffix-icon="fa fa-search" placeholder="实现下拉分页表格" @keyup="keyupEvent4"
                       @focus="focusEvent4" @suffix-click="suffixClick4"></vxe-input>
          </template>
          <template v-slot:dropdown>
            <div class="my-dropdown4">
              <vxe-grid
                size="mini"
                highlight-hover-row
                stripe
                align="center"
                border="outer"
                show-overflow
                :checkbox-config="{showHeader:true,trigger:'row',reserve:true}"
                auto-resize
                height="300"
                :loading="loading4"
                :pager-config="tablePage4"
                :data="tableData4"
                :columns="tableColumn4"
                @cell-click="cellClickEvent4"
                @page-change="pageChangeEvent4">
              </vxe-grid>
            </div>
          </template>
        </vxe-pulldown>
      </vxe-form-item>


      <!-- <vxe-form-item
      field="role"
      title="ElAutocomplete"
      span="8"
      :item-render="{name: 'ElAutocomplete', props: {fetchSuggestions: roleFetchSuggestions}}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="age"
      title="ElInputNumber"
      span="8"
      :item-render="{name: 'ElInputNumber'}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="sex"
      title="ElSelect"
      span="8"
      :item-render="{name: 'ElSelect', options: sexList}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="region"
      title="ElCascader"
      span="8"
      :item-render="{name: 'ElCascader', props: {options: regionList}}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="date"
      title="ElDatePicker"
      span="8"
      :item-render="{name: 'ElDatePicker', props: {type: 'date', format: 'yyyy/MM/dd'}}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="date5"
      title="ElTimeSelect"
      span="8" folding
      :item-render="{name: 'ElTimeSelect', props: {pickerOptions: {start: '08:30', step: '00:15', end: '18:30'}}}"
      > -->
      <!-- </vxe-form-item>
      <vxe-form-item
      field="flag"
      title="ElSwitch"
      span="8" folding
      :item-render="{name: 'ElSwitch'}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="slider"
      title="ElSlider"
      span="8" folding
      :item-render="{name: 'ElSlider'}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="rate"
      title="ElRate"
      span="8" folding
      :item-render="{name: 'ElRate'}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="flag1"
      title="ElRadio"
      span="8"
      folding
      :item-render="{name: 'ElRadio', options: [{label: '是', value: 'Y'}, {label: '否', value: 'N'}]}"
      >
      </vxe-form-item> -->
      <!--
        visible-method  该方法的返回值用来决定该项是否显示
        folding 默认收起
       -->
      <!-- <vxe-form-item
      field="checkedList"
      title="ElCheckbox"
      span="8"
      folding
      :visible-method="visibleMethod"
      :item-render="{name: 'ElCheckbox', options: [{label: '北京', value: 'beijing'}, {label: '深圳', value: 'shenzhen'}, {label: '上海', value: 'shanghai'}]}"
      >
      </vxe-form-item> -->
      <!-- 渲染查询重置按钮 -->
      <!--
      collapse-node  折叠节点（展开=》收起）
       -->
      <vxe-form-item
        span="24"
        align="center"
        :item-render="{name: 'ElButtons', children: [{ content: '查询', props: {type: 'primary', nativeType: 'submit',size:'mini'} }, { content: '重置', props: {nativeType: 'reset',size:'mini'} }]}"
      >
      </vxe-form-item>

    </vxe-form>

    <!-- vxe-工具 -->
    <vxe-toolbar
      custom
    >
      <template v-slot:buttons>
        <el-dropdown size="mini" @command="dropdownMenuEvent" style="margin-right:15px">
          <el-button size="mini">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="remove">删除选中</el-dropdown-item>
            <!-- <el-dropdown-item command="export">导出数据</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
        <el-button size="mini" @click="handleCreate" type="diyfirst">新增</el-button>

        <!-- <el-button @click="insertEvent">新增</el-button> -->
        <!-- <el-button @click="saveEvent">保存</el-button> -->
        <!-- <el-button @click="vaildEvent">校验</el-button> -->
      </template>
    </vxe-toolbar>
    <!-- 
      vxe-table 参数
      border 是否带有边框
      resizable 所有的列是否允许拖动列宽调整大小
      show-overflow 设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）
      keep-source 保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等（开启后影响性能，具体取决于数据量）
      highlight-hover-row  鼠标移到行是否要高亮显示
      export-config 导出配置选项
      <vxe-table
        border
        resizable
        show-overflow
        keep-source
        highlight-hover-row
        ref="xTable"
        height="460"
        :export-config="{}"
        :loading="loading"
        :data="tableData"
        :edit-rules="validRules"
        :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
        @edit-actived="editActivedEvent"
        @edit-closed="editClosedEvent">
     -->
    <vxe-table
      border="outer"
      size="mini"
      align="center"
      stripe
      class="mytable-scrollbar"
      resizable
      show-overflow
      keep-source
      highlight-hover-row
      ref="xTable"
      height="460"
      :export-config="{}"
      :loading="loading"
      :data="tableData"
    >
      <!-- 复选框 -->
      <vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column>
      <!-- 操作 -->
      <vxe-table-column
        title="操作"
        width="85"
        fixed="left"
        show-overflow
      >
        <template v-slot="{ row }">
          <el-button type="text" size="mini" @click="handleUpdate(row)">
            修改
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="text" @click="removeEvent(row)">
            删除
          </el-button>

          <!-- <vxe-button type="text" icon="fa fa-edit" @click="editEvent(row)"></vxe-button>
          <vxe-button type="text" icon="fa fa-trash-o" @click="removeEvent(row)"></vxe-button> -->
        </template>
      </vxe-table-column>


      <!-- 序列 -->
      <!-- <vxe-table-column type="seq" width="60" fixed="left"></vxe-table-column> -->
      <!-- id -->
      <vxe-table-column field="id" title="ID" fixed="left"></vxe-table-column>
      <!-- title 标题 -->
      <vxe-table-column
        field="title"
        title="标题"
        min-width="180"
      ></vxe-table-column>


      <vxe-table-column v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>

      <!-- 以下测试效果用 -->
      <vxe-table-column field="title1" title="标题" min-width="140"></vxe-table-column>
      <vxe-table-column field="title2" title="标题" min-width="140"></vxe-table-column>
      <vxe-table-column field="title3" title="标题" min-width="140"></vxe-table-column>
      <vxe-table-column field="title4" title="标题" min-width="140"></vxe-table-column>
      <vxe-table-column field="title5" title="标题" min-width="140"></vxe-table-column>
      <vxe-table-column field="title6" title="标题" min-width="140"></vxe-table-column>
      <vxe-table-column field="title7" title="标题" min-width="140"></vxe-table-column>
      <vxe-table-column field="title8" title="标题" min-width="140"></vxe-table-column>
      <!-- author 作者 -->
      <vxe-table-column field="author" title="作者" min-width="140"></vxe-table-column>

      <!-- created_at 创建时间 -->
      <vxe-table-column
        field="created_at"
        title="创建时间"
        min-width="140"
      >
      </vxe-table-column>


      <!-- <vxe-table-column field="name" title="ElInput" min-width="140" fixed="left" :edit-render="{name: 'ElInput'}"></vxe-table-column>
      <vxe-table-column field="role" title="ElAutocomplete" width="160" :edit-render="{name: 'ElAutocomplete', props: {fetchSuggestions: roleFetchSuggestions}}"></vxe-table-column>
      <vxe-table-column field="age" title="ElInputNumber" width="160" :edit-render="{name: 'ElInputNumber', props: {max: 35, min: 18}}"></vxe-table-column>
      <vxe-table-column field="sex" title="ElSelect" width="140" :edit-render="{name: 'ElSelect', options: sexList}"></vxe-table-column>
      <vxe-table-column field="sexList" title="ElSelect multiple" width="180" :edit-render="{name: 'ElSelect', options: sexList, props: {multiple: true}}"></vxe-table-column>
      <vxe-table-column field="state" title="ElSelect remote" width="140" :edit-render="{name: 'ElSelect', options: stateOptions, props: {remote: true, filterable: true, loading: stateloading, remoteMethod: remoteStateMethod}}"></vxe-table-column>
      <vxe-table-column field="region" title="ElCascader" width="200" :edit-render="{name: 'ElCascader', props: {options: regionList}}"></vxe-table-column>
      <vxe-table-column field="date" title="ElDatePicker" width="200" :edit-render="{name: 'ElDatePicker', props: {type: 'date', format: 'yyyy/MM/dd'}}"></vxe-table-column>
      <vxe-table-column field="date1" title="ElDatePicker" width="220" :edit-render="{name: 'ElDatePicker', props: {type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss'}}"></vxe-table-column>
      <vxe-table-column field="date5" title="ElTimeSelect" width="200" :edit-render="{name: 'ElTimeSelect', props: {pickerOptions: {start: '08:30', step: '00:15', end: '18:30'}}}"></vxe-table-column>
      <vxe-table-column field="flag" title="ElSwitch" width="100" :cell-render="{name: 'ElSwitch'}"></vxe-table-column>
      <vxe-table-column field="slider" title="ElSlider" width="200" :cell-render="{name: 'ElSlider'}"></vxe-table-column>
      <vxe-table-column field="rate" title="ElRate" width="200" fixed="right" :cell-render="{name: 'ElRate'}"></vxe-table-column> -->
    </vxe-table>


    <!--
      el-pagination 常用参数和事件
      page-size 每页显示条目个数，支持 .sync 修饰符
      page-sizes 每页显示个数选择器的选项设置
      layout 组件布局，子组件名用逗号分隔
      current-page 当前页数，支持 .sync 修饰符
      total 总条目数	
      @size-change pageSize 改变时会触发	回调：每页条数
      @current-change currentPage 改变时会触发 回调：当前页
     -->
    <el-pagination
      small
      style="text-align:right"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tablePage.currentPage"
      :page-sizes="[5, 10, 15, 20, 50, 100, 150, 200]"
      :page-size="tablePage.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tablePage.totalResult">
    </el-pagination>


  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

/* 
 yarn add xe-utils@3 vxe-table@2 vxe-table-plugin-element element-ui


npm install less less-loader css-loader style-loader file-loader font-awesome --save
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-solid-svg-icons

or----------

yarn add less less-loader css-loader style-loader file-loader font-awesome
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/vue-fontawesome
yarn add @fortawesome/free-solid-svg-icons

*/
import {fetchList, fetchPv, createArticle, updateArticle} from '@/api/article2'

const calendarTypeOptions = [
  {key: 'CN', display_name: 'China'},
  {key: 'US', display_name: 'USA'},
  {key: 'JP', display_name: 'Japan'},
  {key: 'EU', display_name: 'Eurozone'}
]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})


export default {
  name: 'vxe-basetable',
  components: {
    //PageHeaderLayout,
  },
  // 定义属性
  data() {
    return {

      // 测试功能-下拉实现分页表格
      value4: '',
      tableColumn4: [
        {type: 'checkbox'},
        {field: 'name', title: 'Name'},
        {field: 'role', title: 'Role'},
        {field: 'sex', title: 'Sex'},
        {field: 'sex2', title: 'Sex'},
        {field: 'sex3', title: 'Sex'},
        {field: 'sex4', title: 'Sex'},
      ],
      loading4: false,
      tableData4: [],
      tableList4: [
        {name: 'Test1', role: '前端', sex: '男'},
        {name: 'Test2', role: '后端', sex: '男'},
        {name: 'Test3', role: '测试', sex: '男'},
        {name: 'Test4', role: '设计师', sex: '女'},
        {name: 'Test5', role: '前端', sex: '男'},
        {name: 'Test6', role: '前端', sex: '男'},
        {name: 'Test7', role: '前端', sex: '男'}
      ],
      tablePage4: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },


      // 表单相关
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      // 表单规则
      rules: {
        type: [{required: true, message: 'type is required', trigger: 'change'}],
        timestamp: [{type: 'date', required: true, message: 'timestamp is required', trigger: 'change'}],
        title: [{required: true, message: 'title is required', trigger: 'blur'}]
      },
      // 表单数据对象
      formSubmitData: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published',
      },
      // 表单用到的值
      calendarTypeOptions,
      statusOptions: ['published', 'draft', 'deleted'],


      // 表格相关
      loading: false,
      tableData: [],
      tableColumn: [
        {type: 'seq', width: 60, fixed: null},
        {type: 'checkbox', width: 50, fixed: null},
        {field: 'name', title: 'Name', width: 200},
        {field: 'nickname', title: 'Nickname', width: 300},
        {field: 'sex', title: 'Sex', width: 200},
        {field: 'role', title: 'Role', width: 200},
        {field: 'address', title: 'Address', width: 300, showOverflow: true}
      ],

      // validRules: {
      //   name: [
      //       { required: true, message: 'app.body.valid.rName' },
      //       { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
      //   ],
      //   sex: [
      //       { required: true, message: '性别必须填写' }
      //   ]
      // },
      // sexList: [],
      // regionList: [],
      // stateList: [],
      // stateOptions: [],
      // stateloading: false,
      // states: [
      //     'Alabama', 'Alaska', 'Arizona',
      //     'Arkansas', 'California', 'Colorado',
      //     'Connecticut', 'Delaware', 'Florida',
      //     'Georgia', 'Hawaii', 'Idaho', 'Illinois',
      //     'Indiana', 'Iowa', 'Kansas', 'Kentucky',
      //     'Louisiana', 'Maine', 'Maryland',
      //     'Massachusetts', 'Michigan', 'Minnesota',
      //     'Mississippi', 'Missouri', 'Montana',
      //     'Nebraska', 'Nevada', 'New Hampshire',
      //     'New Jersey', 'New Mexico', 'New York',
      //     'North Carolina', 'North Dakota', 'Ohio',
      //     'Oklahoma', 'Oregon', 'Pennsylvania',
      //     'Rhode Island', 'South Carolina',
      //     'South Dakota', 'Tennessee', 'Texas',
      //     'Utah', 'Vermont', 'Virginia',
      //     'Washington', 'West Virginia', 'Wisconsin',
      //     'Wyoming'
      // ],
      // restaurants: [
      //   { value: '前端', name: '前端' },
      //   { value: '后端', name: '后端' }
      // ],
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10,  // 每一页页数
        totalResult: 0
      },
      // 检索条件
      formSearchData: {
        title: '',

        /* 以下是示例 筛选表单按钮 */
        // name: '',
        // role: '',
        // sex: null,
        // age: null,
        // region: [],
        // date: null,
        // date5: null,
        // flag: false,
        // slider: 0,
        // rate: 0,
        // flag1: '',
        // checkedList: []
      }


    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

    // 测试功能-下拉实现分页表格
    focusEvent4() {
      this.$refs.xDown4.showPanel()
    },
    keyupEvent4() {
      const {value4} = this
      this.loading4 = true
      setTimeout(() => {
        this.loading4 = false
        if (value4) {
          this.tableData4 = this.tableList4.filter(row => row.name.indexOf(value4) > -1)
        } else {
          this.tableData4 = this.tableList4.slice(0)
        }
      }, 100)
    },
    suffixClick4() {
      this.$refs.xDown4.togglePanel()
    },
    cellClickEvent4({row}) {

      this.value4 = row.name
      // this.$refs.xDown4.hidePanel()
    },
    pageChangeEvent4({currentPage, pageSize}) {
      this.tablePage4.currentPage = currentPage
      this.tablePage4.pageSize = pageSize
    },
    checkboxClick({row}) {
      console.log('checkboxClick::', row)
    },


    findList() {
      this.loading = true
      // XEAjax.get(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`, this.formSearchData).then(({ page, result }) => {
      //   this.tableData = result
      //   this.tablePage.totalResult = page.totalResult
      //   this.loading = false
      //   this.updateStateList()
      // }).catch(e => {
      //   this.loading = false
      // })
      console.log(' this.formSearchData:::', this.formSearchData);
      console.log('打印当前页：：：：', this.tablePage.currentPage);
      // 请求表格数据
      fetchList({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        ...this.formSearchData
      }).then(({data}) => {
        console.log('response:....', data);
        // 给表格数据赋值
        this.tableData = data.data
        // 给分页总数赋值
        this.tablePage.totalResult = data.total
        // this.loading = false
        // this.updateStateList()

        // return false;
        // 明天赋值匹配操作
        // this.list = response.data.data
        // this.total = response.data.total
        // console.log(this.list);
        // console.log(this.total);
        // return false;
        // Just to simulate the time of the request
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      }, error => {
        console.log('getList:error', error);
        // alert(error);
      })


    },
    /* 表单数据获取 */
    // findSexList () {
    //   return XEAjax.get('/api/conf/sex/list').then(data => {
    //     this.sexList = data
    //     return data
    //   })
    // },
    // findRegionList () {
    //   return XEAjax.get('/api/conf/region/list').then(data => {
    //     this.regionList = data
    //     return data
    //   })
    // },
    // remoteStateMethod (query) {
    //   if (query !== '') {
    //     this.stateloading = true
    //     setTimeout(() => {
    //       this.stateloading = false
    //       this.stateOptions = this.stateList.filter(item => {
    //         return item.label.toLowerCase()
    //           .indexOf(query.toLowerCase()) > -1
    //       })
    //     }, 200)
    //   } else {
    //     this.stateOptions = []
    //   }
    // },
    // 模拟后台查当前页出远程下拉值
    // updateStateList () {
    //   setTimeout(() => {
    //     let defaultStateList = []
    //     this.tableData.forEach(row => {
    //       if (row.state && !defaultStateList.some(item => item.value === row.state)) {
    //         defaultStateList.push({
    //           label: row.state.replace('value', 'label'),
    //           value: row.state
    //         })
    //       }
    //     })
    //     this._defaultStateList = defaultStateList
    //     this.stateOptions = defaultStateList
    //   }, 100)
    // },
    // 单行修改事件
    // editActivedEvent ({ row }) {
    //   // 当激活编辑时，重新更新远程下拉值
    //   if (row.state) {
    //     if (row._stateOptions) {
    //       this.stateOptions = row._stateOptions
    //     } else {
    //       // 如果是第一次点击则使用默认的列表
    //       this.stateOptions = this._defaultStateList
    //     }
    //   } else {
    //     this.stateOptions = []
    //   }
    // },
    // editClosedEvent ({ row }) {
    //   // 当激活编辑时，记录当前远程下拉值
    //   row._stateOptions = this.stateOptions
    // },
    // 表格-新增按钮-表格内新增一行
    // insertEvent () {
    //   let record = {
    //     role: '',
    //     age: 18,
    //     region: [],
    //     flag: false,
    //     rate: 2
    //   }
    //   this.$refs.xTable.insert(record).then(({ row }) => this.$refs.xTable.setActiveRow(row))
    // },
    // 表格-保存按钮
    // saveEvent () {
    //   let { insertRecords, removeRecords, updateRecords } = this.$refs.xTable.getRecordset()
    //   if (insertRecords.length || removeRecords.length || updateRecords.length) {
    //     this.$alert('保存成功！')
    //     this.searchEvent()
    //   } else {
    //     this.$alert('数据未改动！')
    //   }
    // },
    // 校验
    // vaildEvent () {
    //   this.$refs.xTable.validate((errMap) => {
    //     if (errMap) {
    //       this.$XModal.message({ status: 'error', message: '校验不通过！' })
    //     } else {
    //       this.$XModal.message({ status: 'success', message: '校验成功！' })
    //     }
    //   })
    // },
    // 表格-操作按钮
    dropdownMenuEvent(name) {
      switch (name) {
        case 'remove': {
          let selectRecords = this.$refs.xTable.getCheckboxRecords()
          if (selectRecords.length) {
            this.$refs.xTable.removeCheckboxRow()
          } else {
            this.$alert('请至少选择一条数据！')
          }
          break
        }
        case 'export': {
          this.$refs.xTable.exportData()
          break
        }
      }
    },
    searchEvent() {
      this.tablePage.currentPage = 1
      this.findList()
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize
      this.searchEvent()
    },
    handleCurrentChange(currentPage) {
      console.log('当前页码currentPage切换：', currentPage);
      this.tablePage.currentPage = currentPage
      this.findList()
    },
    visibleMethod({data}) {
      return data.flag1 === 'Y'
    },
    roleFetchSuggestions(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 3000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },


    /* 表单操作 */
    // 修改
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 新增
    handleCreate() {
      // 重置表单内容
      this.resetFormSubmitData()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 单删除
    removeEvent(row) {
      this.$XModal.confirm('您确定要删除该数据?').then(type => {
        if (type === 'confirm') {
          this.$refs.xTable.remove(row)
        }
      })
    },
    // 重置表单内容
    resetFormSubmitData() {
      this.formSubmitData = {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        status: 'published',
        type: ''
      }
    },


  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 测试功能-下拉分页表格
    this.keyupEvent4()


    // this.stateList = this.states.map(item => {
    //     return { value: `value:${item}`, label: `label:${item}` }
    // })
    this.findList()
    // this.findSexList()
    // this.findRegionList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>

/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
  background-color: #FFFFFF;
}

/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
  background-color: #bfbfbf;
  border-radius: 5px;
  border: 1px solid #F1F1F1;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
  background-color: #A8A8A8;
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
  background-color: #787878;
}

/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
  background-color: #FFFFFF;
}


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>